<template>
  <div class="page">
    <h2>话题管理</h2>
    <form @submit.prevent="onCreate">
      <input v-model="topic.topic_id" placeholder="话题ID" />
      <input v-model="topic.topic_name" placeholder="话题名称" />
      <input v-model="topic.extract_date" placeholder="提取日期YYYY-MM-DD" />
      <input v-model="keywords" placeholder="关键词，逗号分隔" />
      <button type="submit">创建</button>
    </form>
    <div>
      <ul>
        <li v-for="t in list" :key="t.id">
          <span>{{ t.topic_id }} - {{ t.topic_name }}</span>
          <button @click="onDelete(t.id)">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { createTopic, listTopics, deleteTopic } from '../../api/social'

const topic = ref({ topic_id: '', topic_name: '', extract_date: '' })
const keywords = ref('')
const list = ref<any[]>([])

async function load() {
  const resp = await listTopics()
  list.value = resp.data || []
}

async function onCreate() {
  const ks = keywords.value ? keywords.value.split(',').map(x => x.trim()).filter(Boolean) : []
  await createTopic({ ...topic.value, keywords: ks })
  topic.value = { topic_id: '', topic_name: '', extract_date: '' }
  keywords.value = ''
  await load()
}

async function onDelete(id: string) {
  await deleteTopic(id)
  await load()
}

onMounted(load)
</script>
<style scoped>
.page { padding: 16px }
form { display: flex; gap: 8px; margin-bottom: 12px }
ul { list-style: none; padding: 0 }
li { display: flex; align-items: center; gap: 12px; padding: 8px 0 }
</style>
